<template>
  <view class="page-content">
    <f-navbar title="订单管理" :isShowLeft="false"></f-navbar>
    <view class="main-content">
      <view class="card" v-if="checkPermi(['order:page:receiveOrder', 'order:page:receiveTask'])">
        <view class="card-title">收运管理</view>
        <view class="card-button">
          <view class="card-button1" v-if="checkPermi(['order:page:receiveOrder'])">
            <view @click="goLink('/pages/order/collectionOrder/index')">收运订单</view>
          </view>
          <view class="card-button2" v-if="checkPermi(['order:page:receiveTask'])"
            @click="goLink('/pages/order/collectionTask/index')">
            <view>收运任务</view>
          </view>
        </view>
      </view>
      <view class="card" v-if="checkPermi(['order:page:transportOrder', 'order:page:transportTask'])">
        <view class="card-title">运输管理</view>
        <view class="card-button">
          <view class="card-button3" v-if="checkPermi(['order:page:transportOrder'])"
            @click="goLink('/pages/order/transportOrder/index')">
            <view>运输订单</view>
          </view>
          <view class="card-button4" v-if="checkPermi(['order:page:transportTask'])"
            @click="goLink('/pages/order/transportTask/index')">
            <view>运输任务</view>
          </view>
        </view>
      </view>
    </view>
    <tabbar :tabIndex="2"></tabbar>
  </view>
</template>

<script>
import tabbar from "@/components/tabbar/index.vue";
export default {
  components: {
    tabbar,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.main-content {
  padding: 0 30rpx;

  .card {
    margin-top: 30rpx;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
  }

  .card-title {
    padding: 18rpx 0;
    width: 100%;
    font-size: 32rpx;
    color: #000000;
    text-align: center;
    background: rgba(209, 224, 217, 0.6);
  }

  .card-button {
    display: flex;
    justify-content: center;
    padding: 40rpx;

    view {
      width: 271rpx;
      height: 288rpx;
      margin: 0 22rpx;
      background-size: 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 30rpx;

      view {
        font-size: 32rpx;
        color: #ffffff;
      }
    }
  }

  .card-button1 {
    background-image: url("@/static/images/common/card1.png");
  }

  .card-button2 {
    background-image: url("@/static/images/common/card2.png");
  }

  .card-button3 {
    background-image: url("@/static/images/common/card3.png");
  }

  .card-button4 {
    background-image: url("@/static/images/common/card4.png");
  }
}</style>
